<template>
  <view class="setting-container">
    <!-- 修改密码入口 -->
    <view class="setting-item" @click="openPasswordModal">
      <text class="setting-text">修改密码</text>
    </view>
    
    <!-- 找回密码入口 -->
    <view class="setting-item" @click="goToZhaohui">
      <text class="setting-text">找回密码</text>
    </view>
    
    <!-- 修改密保答案 -->
    <view class="setting-item" @click="openSecurityAnswerModal">
      <text class="setting-text">修改密保答案</text>
    </view>
    
    <!-- 注销账号 -->
    <view class="setting-item" @click="openDeleteAccountModal">
      <text class="setting-text">注销账号</text>
    </view>

    <!-- 密码修改模态框 -->
    <view class="modal-mask" v-if="showPasswordModal" @click="closePasswordModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">修改密码</view>
        <view class="input-item">
          <text class="input-icon">🔒</text>
          <input 
            type="password" 
            placeholder="请输入原密码" 
            v-model="oldPassword"
          >
        </view>
        <view class="input-item">
          <text class="input-icon">🔑</text>
          <input 
            type="password" 
            placeholder="请输入新密码(6-16位)" 
            v-model="newPassword"
          >
        </view>
        <view class="input-item">
          <text class="input-icon">🔑</text>
          <input 
            type="password" 
            placeholder="请确认新密码" 
            v-model="confirmPassword"
          >
        </view>
        <button class="modal-btn" @click="updatePassword">确认修改</button>
        <button class="modal-cancel" @click="closePasswordModal">取消</button>
      </view>
    </view>

    <!-- 修改密保答案模态框 -->
    <view class="modal-mask" v-if="showSecurityAnswerModal" @click="closeSecurityAnswerModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">修改密保答案</view>
        <view class="input-item">
          <text class="input-icon">🔒</text>
          <input 
            type="password" 
            placeholder="请输入密码验证身份" 
            v-model="securityVerifyPassword"
          >
        </view>
        <view class="input-item">
          <text class="input-icon">💡</text>
          <input 
            type="text" 
            placeholder="请输入新密保答案" 
            v-model="newSecurityAnswer"
          >
        </view>
        <button class="modal-btn" @click="updateSecurityAnswer">确认修改</button>
        <button class="modal-cancel" @click="closeSecurityAnswerModal">取消</button>
      </view>
    </view>

    <!-- 注销账号模态框 -->
    <view class="modal-mask" v-if="showDeleteModal" @click="closeDeleteAccountModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">注销账号</view>
        <view class="warning-text">请输入密码确认注销，注销后所有数据将无法恢复</view>
        <view class="input-item">
          <text class="input-icon">🔒</text>
          <input 
            type="password" 
            placeholder="请输入密码确认" 
            v-model="deletePassword"
          >
        </view>
        <button class="modal-btn delete-btn" @click="confirmDeleteAccount">确认注销</button>
        <button class="modal-cancel" @click="closeDeleteAccountModal">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 修改密码相关
      showPasswordModal: false,
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      
      // 修改密保答案相关
      showSecurityAnswerModal: false,
      securityVerifyPassword: '',
      newSecurityAnswer: '',
      
      // 注销账号相关
      showDeleteModal: false,
      deletePassword: '',
      
      // 用户信息
      userInfo: uni.getStorageSync('userInfo') || {}
    }
  },
  methods: {
    // 打开修改密码模态框
    openPasswordModal() {
      this.showPasswordModal = true
      this.oldPassword = ''
      this.newPassword = ''
      this.confirmPassword = ''
    },
    
    // 关闭修改密码模态框
    closePasswordModal() {
      this.showPasswordModal = false
    },
    
    // 打开修改密保答案模态框
    openSecurityAnswerModal() {
      this.showSecurityAnswerModal = true
      this.securityVerifyPassword = ''
      this.newSecurityAnswer = ''
    },
    
    // 关闭修改密保答案模态框
    closeSecurityAnswerModal() {
      this.showSecurityAnswerModal = false
    },
    
    // 打开注销账号模态框
    openDeleteAccountModal() {
      this.showDeleteModal = true
      this.deletePassword = ''
    },
    
    // 关闭注销账号模态框
    closeDeleteAccountModal() {
      this.showDeleteModal = false
    },
    
    // 跳转到找回密码页面
    goToZhaohui() {
      uni.navigateTo({ url: '/my_pages/zhaohui' })
    },
    
    // 修改密码
    async updatePassword() {
      // 表单验证
      if (!this.oldPassword) {
        return uni.showToast({ title: '请输入原密码', icon: 'none' })
      }
      if (this.newPassword.length < 6 || this.newPassword.length > 16) {
        return uni.showToast({ title: '新密码需6-16位', icon: 'none' })
      }
      if (this.newPassword !== this.confirmPassword) {
        return uni.showToast({ title: '两次密码不一致', icon: 'none' })
      }
      if (!this.userInfo.id) {
        return uni.showToast({ title: '未获取到用户信息', icon: 'none' })
      }
      
      try {
        uni.showLoading({ title: '修改中...' })
        
        const res = await uni.$http.post('/user/updatePassword', {
          id: this.userInfo.id,
          oldPassword: this.oldPassword,
          newPassword: this.newPassword
        })
        
        uni.hideLoading()
        
        if (res.statusCode === 200 && res.data.code === 200) {
          uni.showToast({ title: '密码修改成功', icon: 'none' })
          this.closePasswordModal()
          uni.removeStorageSync('userInfo')
          setTimeout(() => {
            uni.reLaunch({ url: '/pages/login' })
          }, 1500)
        } else {
          uni.showToast({ title: res.data.msg || '修改失败', icon: 'none' })
        }
      } catch (err) {
        uni.hideLoading()
        console.error('修改密码失败:', err)
        uni.showToast({ title: '网络错误，请重试', icon: 'none' })
      }
    },
    
    // 修改密保答案
    async updateSecurityAnswer() {
      // 表单验证
      if (!this.securityVerifyPassword) {
        return uni.showToast({ title: '请输入密码验证', icon: 'none' })
      }
      if (!this.newSecurityAnswer.trim()) {
        return uni.showToast({ title: '请输入密保答案', icon: 'none' })
      }
      if (!this.userInfo.id) {
        return uni.showToast({ title: '未获取到用户信息', icon: 'none' })
      }
      
      try {
        uni.showLoading({ title: '修改中...' })
        
        const res = await uni.$http.post('/user/updateSecurityAnswer', {
          id: this.userInfo.id,
          password: this.securityVerifyPassword,
          securityAnswer: this.newSecurityAnswer
        })
        
        uni.hideLoading()
        
        if (res.statusCode === 200 && res.data.code === 200) {
          uni.showToast({ title: '密保答案修改成功', icon: 'none' })
          this.closeSecurityAnswerModal()
          // 更新本地存储的用户信息
          this.userInfo.securityAnswer = this.newSecurityAnswer
          uni.setStorageSync('userInfo', this.userInfo)
        } else {
          uni.showToast({ title: res.data.msg || '修改失败', icon: 'none' })
        }
      } catch (err) {
        uni.hideLoading()
        console.error('修改密保答案失败:', err)
        uni.showToast({ title: '网络错误，请重试', icon: 'none' })
      }
    },
    
    // 确认注销账号
    async confirmDeleteAccount() {
      if (!this.deletePassword) {
        return uni.showToast({ title: '请输入密码', icon: 'none' })
      }
      if (!this.userInfo.id) {
        return uni.showToast({ title: '未获取到用户信息', icon: 'none' })
      }
      
      try {
        uni.showLoading({ title: '处理中...' })
        
        const res = await uni.$http.post('/user/deleteAccount', {
          id: this.userInfo.id,
          password: this.deletePassword
        })
        
        uni.hideLoading()
        
        if (res.statusCode === 200 && res.data.code === 200) {
          uni.showToast({ title: '账号注销成功', icon: 'none' })
          this.closeDeleteAccountModal()
          uni.removeStorageSync('userInfo')
          setTimeout(() => {
            uni.reLaunch({ url: '/pages/login' })
          }, 1000)
        } else {
          uni.showToast({ title: res.data.msg || '注销失败', icon: 'none' })
        }
      } catch (err) {
        uni.hideLoading()
        console.error('注销账号失败:', err)
        uni.showToast({ title: '网络错误，请重试', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.setting-container {
  background-color: #F8F8F8;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 24rpx;
  background-color: #fff;
  margin-bottom: 1rpx;
}

.setting-text {
  font-size: 32rpx;
  color: #333;
}

/* 模态框样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.modal-title {
  font-size: 36rpx;
  text-align: center;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.warning-text {
  color: #C00000;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 30rpx;
  padding: 0 20rpx;
}

.input-item {
  display: flex;
  align-items: center;
  background-color: #F8F8F8;
  padding: 0 20rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.input-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.input-item input {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  background-color: transparent;
}

.modal-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #C00000;
  color: #fff;
  font-size: 34rpx;
  border-radius: 48rpx;
  margin-bottom: 20rpx;
}

.delete-btn {
  background-color: #FF3B30;
}

.modal-cancel {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #F5F5F5;
  color: #333;
  font-size: 34rpx;
  border-radius: 48rpx;
}
</style>
